// 9. 路由配置文件 - router/index.js
// 导入Vue Router的核心函数
import { createMemoryHistory, createRouter, createWebHistory } from 'vue-router'

// 10. 导入路由组件
// 这些是将在RouterView中显示的页面组件
// 使用相对路径从components文件夹导入
import HomeView from '../components/HomeView.vue'  // 首页组件
import AboutView from '../components/AboutView.vue'  // 关于页组件

// 11. 定义路由配置
// routes数组包含所有路由映射关系
const routes = [
    // 每个路由对象需要两个基本属性:
    // path: 浏览器地址栏中显示的路径
    // component: 当URL匹配这个路径时要显示的组件
    { path: '/', component: HomeView },  // 当访问根路径/时，显示HomeView组件
    { path: '/about', component: AboutView },  // 当访问/about路径时，显示AboutView组件
]

// 12. 创建路由实例
// 使用createRouter函数创建路由器对象
const router = createRouter(
    {
        // history配置如何存储路由历史记录
        // createMemoryHistory: 使用内存模式，适合在非浏览器环境使用
        // 完全忽略浏览器的 URL 而使用其自己内部的 URL
        // 实际项目中更常用createWebHistory来支持浏览器前进后退
        history: createMemoryHistory(),
        // 传入上面定义的路由配置数组
        routes,
    }
)

// 13. 导出路由实例
// 使router对象可以被main.js导入和使用
export default router